<template>
	<view class="qrcode">
		<view class="tip">
			<text class="txt">请对方点击</text>
			<button class="btn">
				<icon class="iconfont icon-tianjiajiahaoyoutianjiapengyou"></icon>朋友
			</button>
			<text class="txt">按钮</text>
		</view>
		<view class="tip">
			<text class="txt">扫描此二维码加我为友</text>
		</view>
		<w-qrcode :options="idCode" style="margin: 15px;"></w-qrcode>
		<view class="tip">
			<button @tap="refreshIDQOR" class="btn" style="padding: 0 15px;font-size: 14px;">添加完成，刷新朋友列表</button>
		</view>
	</view>
</template>

<script>
import { onMounted, ref } from "vue"
import userInfo from "../../hooks/userInfo.js"
	export default {
		name: "idcode",
		setup(props,ctx) {
			onMounted(()=>{
				createIDCode()
			})
			let user = userInfo()
			let idCode = ref({})
			function createIDCode(){
				idCode.value = {
					code: user.IDNumber,
					size: 360,
					img: {
						degree: 8,
						src: user.avatar,
						size: 90,
						type: 'round',
						color: '#ffffff',
						width: 10
					},
				}
			}
			// 关闭并刷新数据
			function refreshIDQOR() {
				ctx.emit("refreshIDQOR", "close-refresh");
			}
			
			return {
				idCode, refreshIDQOR
			}
		}
	}
</script>

<style lang="scss">
	.qrcode {
		width: 300px;
		background-color: #fff;
		margin: auto;
		margin-top: 90px;
		padding: 20px 0;
		display: flex;
		flex-direction: column;
		align-items: center;
		justify-content: center;

		.tip {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;

			.txt {
				color: #666;
			}

			.btn {
				position: relative;
				padding: 0 10px;
				padding-left: 30px;
				margin: 0 3px;
				font-size: 12px;
				background-color: $color-main;
				outline: none;

				.iconfont {
					margin: 0 3px;
					position: absolute;
					top: -5px;
					left: 10px;
				}
			}
		}
	}
</style>
